<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
    <link rel="stylesheet" href="../css/slogcommon.css" />
</head>

<style type="text/css">
	a{
		color: #777;
	}
	
	a:active{
		color: #777;
	}
	
	.mui-bar~.mui-content .mui-fullscreen {
		top: 44px;
		height: auto;
	}
			
	.mui-slider-indicator.mui-segmented-control {
		background-color: #efeff4;
	}
	.mui-pull-bottom-wrapper{
		text-align: center;
	}
</style>

<body>
    
    <div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#item1mobile">
				供应
			</a>
					<a class="mui-control-item" href="#item2mobile">
				求购
			</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
						            
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll mui-scroll-support">
								<ul class="mui-table-view " id="supportlisttable">
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll mui-scroll-give">
								<ul class="mui-table-view" id="givedlisttable">
								</ul>
							</div>
						</div>
					</div>
					
				</div>
			</div>
    	</div>
    <script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="../js/common.js" ></script>
    <script src="../js/mui.pullToRefresh.material.js"></script>
	<script src="../js/mui.pullToRefresh.js"></script>
    <script type="text/javascript">
    mui.init()
    (function($) {
				//阻尼系数
				var deceleration = mui.os.ios?0.003:0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration:deceleration
				});
				
				
				
				var curPage = 1;
				var curGivePage = 1;
				console.log(localStorage.getItem('userCompId'));
				initSupportUiData(curPage);
		    	initGiveUiData(curGivePage);
				
				
				$.ready(function() {
					var compLocal = localStorage.getItem('userCompId');
					var companyId = "-1";
					if(compLocal != undefined && compLocal != ""){
						companyId = compLocal;
					}
					//循环初始化所有下拉刷新，上拉加载。
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll-support'), function(index, pullRefreshEl) {
						$(pullRefreshEl).pullToRefresh({
							down: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										demandType = 2;
										curPage=1;
										ul.insertBefore(refresh(ul, curPage, demandType), ul.firstChild);
										self.endPullDownToRefresh();
									}, 1000);
								}
							},
							up: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										curPage++;
										demandType = 2;
										ul.appendChild(refresh(ul, curPage, demandType));
										self.endPullUpToRefresh();
									}, 1000);
								}
							}
						});
					});
					
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll-give'), function(index, pullRefreshEl) {
						$(pullRefreshEl).pullToRefresh({
							down: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										demandType = 1;
										curGivePage=1;
										ul.insertBefore(refresh(ul, curGivePage, demandType), ul.firstChild);
										self.endPullDownToRefresh();
									}, 1000);
								}
							},
							up: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										curGivePage++;
										demandType = 1;
										ul.appendChild(refresh(ul, curGivePage, demandType));
										self.endPullUpToRefresh();
									}, 1000);
								}
							}
						});
					});
					
					 /**
				     * 刷新函数
				     * @param {Object} pageIn
				     */
				    function refresh(ul,pageIn,demandType){
				//  	demandType = 1;
				//  	curPage = 1;
				    	dataParams = {
							page:pageIn,
							industryid:2,
							companyid:companyId,
							demandType:demandType
						};
						var fragment = document.createDocumentFragment();
				    	ajax_login_other_sync(reqUrl,dataParams,ul,pageIn,createFragment);
				    	return fragment;
				    }
					
					var createFragment = function(ul, page,arrData) {
						var length = ul.querySelectorAll('li').length;
						var li;
						
						for (var i = 0; i < arrData.length; i++) {
							li = document.createElement('li');
							li.className = 'mui-table-view-cell';
//							li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
							li.innerHTML = '<div class="join_warp">\
											<strong>'+resData.msg[i].DemandName+'</strong>\
											<div><spn >对接方向：<a style="color:#F0AD4E">'+resData.msg[i].DirectionName +'</a>  </span>\
											</div>\
											<a href="#"><spn class = "mui-pull-left">'+resData.msg[i].CompanyName+'</spn>\
												<span class="mui-pull-right">'+resData.msg[i].CreateDate.split(" ")[0]+'</span>\
											</a>\
										</div>';
							fragment.appendChild(li);
						}
//						return fragment;
					};
				});
			})(mui);
    
    
		    mui('.mui-table-view-cell').on('tap','div',function(){
		      mui.openWindow({
								url:"supportdetial.html",
								id:'supportdetial.html',
		//						waiting{
		//							autoShow:false
		//						},
								createNew:false
							});
		    }) 
							
							demandType = 2;
							var dataParams;
							var reqUrl = "Leather/Home/AjaxService/SelDemandAndSupplyPageAllData.ashx";
		    
		    
		    function initSupportUiData(){
		    	//初始化供应信息
		    	var compLocal = localStorage.getItem('userCompId');
							curPage = 1;
							var companyId = "-1";
							if(compLocal != undefined && compLocal != ""){
								companyId = compLocal;
							}
		    	curPage = 1;
		    	demandType = 2;
		    	dataParams = {
					page:curPage,
					industryid:2,
					companyid:companyId,
					demandType:demandType
				}
		    	
		    	ajax_login_new(reqUrl,dataParams,supportResFunc);
		    }
		    
		   
		    
		    function initGiveUiData(){
		    	//初始化需求信息
		    	var compLocal = localStorage.getItem('userCompId');
							curPage = 1;
							var companyId = "-1";
							if(compLocal != undefined && compLocal != ""){
								companyId = compLocal;
							}
		    	demandType = 1;
		    	curPage = 1;
		    	dataParams = {
					page:curPage,
					industryid:2,
					companyid:companyId,
					demandType:demandType
				};
		    	ajax_login_other(reqUrl,dataParams,givResFunc);
		    }
		    
		    function supportResFunc(resData){
		    	console.log("totoal" + resData.total + "--- resdata" + resData.msg[0].DemandType)
		//  	
//				var total = parseInt(resData.total);
//				var totalCount = total - (curPage-1)*10;
				var sul = document.getElementById('supportlisttable');
				for (var i=0; i < resData.msg.length; i++) {
					sul.innerHTML += '<li class="mui-table-view-cell">\
												<div class="join_warp">\
													<strong>'+resData.msg[i].DemandName+'</strong>\
													<div><spn >对接方向：<a style="color:#F0AD4E">'+resData.msg[i].DirectionName +'</a>  </span>\
													</div>\
													<a href="#"><spn class = "mui-pull-left">'+resData.msg[i].CompanyName+'</spn>\
														<span class="mui-pull-right">'+resData.msg[i].CreateDate.split(" ")[0]+'</span>\
													</a>\
												</div>\
											</li>';
				}
				
		    }
		    
		    function givResFunc(resData){
		    	console.log("totoal" + resData.total + "--- resdata" + resData.msg[0].DemandType)
		    	
//		    	console.log("totoal" + resData.total + "--- resdata" + resData.msg[0].DemandType)
		//  	
//				var total = parseInt(resData.total);
//				var totalCount = total - (curPage-1)*10;
				var sul = document.getElementById('givedlisttable');
				for (var i=0; i < resData.msg.length; i++) {
					sul.innerHTML += '<li class="mui-table-view-cell">\
												<div class="join_warp">\
													<strong>'+resData.msg[i].DemandName+'</strong>\
													<div><spn >对接方向：<a style="color:#F0AD4E">'+resData.msg[i].DirectionName +'</a>  </span>\
													</div>\
													<a href="#"><spn class = "mui-pull-left">'+resData.msg[i].CompanyName+'</spn>\
														<span class="mui-pull-right">'+resData.msg[i].CreateDate.split(" ")[0]+'</span>\
													</a>\
												</div>\
											</li>';
				}
		    }
    
    </script>
</body>
</html>

